<template>
    <div class="text-message-container"
         v-bind:class="{out:message.direction === 0}">
        <p class="text" v-html="this.textContent" ></p>
    </div>
</template>

<script>
import Message from "@/wfc/messages/message";
import {parser as emojiParse} from "@/emoji/emoji";

export default {
    name: "TextMessageContentView",
    props: {
        message: {
            type: Message,
            required: true,
        }
    },
    data() {
        return {
            textSelected: false,
        }
    },
    mounted() {
    },

    methods: {
        escapeHtml(text) {
            return text.replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/ /g, '&nbsp;')
                .replace(/<script/gi, "&lt;script")
                .replace(/<iframe/gi, "&lt;iframe");
        }
    },

    computed: {
        textContent() {
            let content = this.message.messageContent.digest(this.message);
            let lines = content.split('\n');
            if (lines.length > 1) {
                content = lines.map(line => `<span>${this.escapeHtml(line)}</span>\n`).reduce((total, cv, ci, arr) => total + cv, '');
            } else {
               content = this.escapeHtml(content)
                }
            content = emojiParse(content);
            // tmp = marked.parse(tmp);
            if (content.indexOf('<img') >= 0) {
                content = content.replace(/<img/g, '<img style="max-width:400px;"')
                return content;
            }
            return content;
        }
    }
}
</script>

<style lang="css" scoped>
.text-message-container {
    margin: 0 10px;
    padding: 10px;
    background-color: #ECF1FF;
    position: relative;
    border-radius: 8px ;
    display: flex;
    align-items: center;
}

.text-message-container p {
    user-select: text;
    white-space: pre-line;
}



.text-message-container .text {
		color: #222325;
		font-family: MiSans;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 23px; 

    max-height: 1000px;
    word-break: break-word;
    overflow: hidden;
    display: inline-block;
    user-select: none;
    text-overflow: ellipsis;
}

/*style for v-html */
.text-message-container .text >>> img {
    max-width: 200px !important;
    display: inline-block;
}

.text-message-container .text >>> a{
    white-space: normal;
}
.text-message-container.out {
    background-color: #386BF6;
		border-radius: 8px 8px 2px 8px;
}
.text-message-container.out  .text {
    color: #ffffff;
}
</style>
